<template>
  <div id="olmap">
    <div id="popup">
      <template v-for="col in popupCol" :key="col.value">
        <span class="title">{{ col.label }}:</span>
        <span class="content">{{ popupData?.[col.value] }}</span>
        <br />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import MapUtils from '../../utils/olMap/index'
  import { getGeocoderData } from '@/shared'

  const map = ref<any>(null)

  const popupCol = reactive<{ label: string; value: string }[]>([
    { label: '地址', value: 'formatted_address' },
    { label: '最近地点信息', value: 'address' },
    { label: '最近地点信息距离', value: 'address_distance' },
    { label: '最近地点信息方向', value: 'address_position' },
    { label: '所在地区', value: 'citys' },
    { label: '最近poi点', value: 'poi' },
    { label: '最近poi点的距离', value: 'poi_distance' },
    { label: '最近poi点的方向', value: 'poi_position' },
    { label: '最近的路', value: 'road' },
    { label: '距离此路的距离', value: 'road_distance' }
  ])
  const popupData = ref<any>()

  const mapTool = new MapUtils()
  const mapOption = {
    target: 'olmap',
    center: [104.06, 30.67],
    zoom: 12,
    minZoom: 3,
    maxZoom: 19
  }

  onMounted(() => {
    map.value = mapTool.initMap(mapOption)
    map.value.on('dblclick', async (e) => {
      console.log('%c [  ]-26', 'font-size:13px; background:#b13342; color:#f57786;', e)
      const lat = e.coordinate[1]
      const lng = e.coordinate[0]
      const {
        formatted_address,
        addressComponent: {
          address,
          address_distance,
          address_position,
          poi,
          poi_distance,
          poi_position,
          road,
          road_distance,
          province,
          city,
          county
        }
      }: any = await getGeocoderData(lat, lng)
      popupData.value = {
        formatted_address,
        address,
        address_distance,
        address_position,
        poi,
        poi_distance,
        poi_position,
        road,
        road_distance,
        citys: `${province}${city}${county}`
      }
      mapTool.addPopup('popup', e.coordinate)
    })
    map.value.on('click', (e) => {
      mapTool.removePopupOverlay()
    })
  })
</script>

<style lang="less" scoped>
  #olmap {
    width: 100%;
    height: 76vh;
    border: 1px solid #96d1db;
  }
</style>
